<template>
  <div class="Subject">
    <!-- 左侧 -->
    <div class="Left">
      <!-- 左侧上半部分 -->
      <div class="left-t">
        <!-- 标题 -->
        <div class="lins"><Lin newName="数据汇总"></Lin></div>
        <!-- 时间选择部分 -->
        <div class="times">
          <img src="../assets/时钟.png" alt="" />
          <samp>2023/5/19/~2023/5/30</samp>
          <img src="../assets/下箭头.png" alt="" />
        </div>
        <!-- 运营商 -->
        <div class="inp">
          <img src="../assets/搜索.png" alt="" />
          <samp>运营商</samp>
          <img src="../assets/列表.png" alt="" />
        </div>

        <div class="item">
          <img src="../assets/图层 12.png" alt="" />
          <div class="item-r">
            <samp>全平台总售卖金额</samp>
            <p class="num1"><Num class="num1" :endVal="284864.1" :decimals="1"></Num><samp>元</samp></p>
          </div>
        </div>

        <div class="item item1">
          <img src="../assets/图层 14.png" alt="" />
          <div class="item-r">
            <samp>今日销售金额</samp>
            <p class="num2"><Num class="num2" :endVal="284864"></Num><samp>元</samp></p>
          </div>
        </div>

        <div class="item item2">
          <img src="../assets/图层 13.png" alt="" />
          <div class="item-r">
            <samp>设备总数</samp>
            <p class="num3"><Num class="num3" :endVal="284864.0"></Num><samp>台</samp></p>
          </div>
        </div>

        <div class="bottom">
          <div class="bottom-l">
            <samp>运营商总数</samp>
            <samp>6461</samp>
            <Progress :width="140" :progress="80" color="#F6D21AFF"></Progress>
          </div>
          <div class="bottom-r">
            <samp>订单数量</samp>
            <samp>6461</samp>
            <Progress :width="140" :progress="50" color="#5990F4FF"></Progress>
          </div>
        </div>
      </div>
      <div class="left-b">
        <div class="left-b-t"><Lin newName="订单实时数据轮播"></Lin></div>

        <vue-seamless-scroll
          :data="wordlist"
          :class-option="{ singleHeight: 28, waitTime: 2500, step: 1 }"
          class="anim"
        >
          <li v-for="(item, index) in wordlist" :key="index">{{ item }}</li>
        </vue-seamless-scroll>
      </div>
    </div>
    <!-- 中间 -->
    <div class="value">
      <div class="map">
        <div class="headline">定位查看</div>
        <div class="details">
          <div class="state">
            <samp class="state-l">在线</samp>
            <samp class="state-r">E 时代</samp>
          </div>
          <div class="location">
            <img src="../assets/location.png" alt="" />
            <samp>江苏省苏州市工业园区XXX号</samp>
          </div>
          <div class="day">
            <img src="../assets/方块.png" alt="" />
            <div class="day-r">
              <p><Num class="samp"></Num>RM</p>
              <p>总销售金额</p>
            </div>
          </div>
          <div class="day">
            <img src="../assets/方块.png" alt="" />
            <div class="day-r">
              <p><Num :endVal="106158" class="samp"></Num>RM</p>
              <p>总销售金额</p>
            </div>
          </div>
        </div>
      </div>
      <div class="value-b">
        <div class="b-left">
          <div class="b-left-t">
            <lin newName="运营商设备排行柱状图"></lin>
          </div>
          <div ref="chart" class="chart"></div>
        </div>
        <div class="b-right">
          <div class="b-regin-t">
            <lin newName="运营商设备排行柱状图"></lin>
          </div>
          <div ref="chart1" class="chart1"></div>
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="right">
      <div class="right-t">
        <div class="t-top">
          <div class="t-top-t">
            <lin newName="进15天成交曲线图"></lin>
          </div>
          <div ref="chart2" class="chart2"></div>
        </div>
        <div class="t-bun">
          <div class="t-bun-b">
            <lin newName="支付占比"></lin>
          </div>
          <div class="item-value">
            <p>数字货币<samp class="f1">10%</samp></p>
            <p>支付宝<samp class="f2">30%</samp></p>
            <p>微信<samp class="f3">60%</samp></p>
          </div>
          <div ref="chart3" class="chart3"></div>
        </div>
      </div>
      <div class="right-b">
        <div class="right-b-n">
          <lin newName="报警信息轮番图"></lin>
        </div>
        <vue-seamless-scroll
          :data="hintlist"
          :class-option="{ singleHeight: 28, waitTime: 2500, step: 1 }"
          class="anim"
        >
          <li
            class="bun-li1"
            v-for="(item, index) in hintlist"
            :key="index"
            v-if="item.name === '[警报]'"
          >
            <samp>{{ item.name }}</samp
            >{{ item.value }}
          </li>
          <li
            class="bun-li2"
            v-for="(item, index) in hintlist"
            :key="index"
            v-if="item.name === '[缺货]'"
          >
            <samp>{{ item.name }}</samp
            >{{ item.value }}
          </li>
          <li
            v-for="(item, index) in hintlist"
            :key="index"
            v-if="item.name === ''"
          >
            <samp>{{ item.name }}</samp
            >{{ item.value }}
          </li>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import vueSeamlessScroll from 'vue-seamless-scroll'
import Lin from '@/components/lin.vue'
import Progress from '@/components/Progress.vue'
import Num from '@/components/num.vue'
export default {
  name: 'my-Subject',
  data () {
    return {
      wordlist: [
        '订单实时数据轮播',
        '订单实时数据轮播',
        '订单实时数据轮播',
        '订单实时数据轮播',
        '订单实时数据轮播',
        '订单实时数据轮播',
        '订单实时数据轮播',
        '订单实时数据轮播',
        '订单实时数据轮播'
      ],
      hintlist: [
        { name: '[警报]', value: '订单实时数据轮播' },
        { name: '[警报]', value: '订单实时数据轮播' },
        { name: '[缺货]', value: '订单实时数据轮播' },
        { name: '[缺货]', value: '订单实时数据轮播' },
        { name: '', value: '订单实时数据轮播' },
        { name: '', value: '订单实时数据轮播' },
        { name: '[警报]', value: '订单实时数据轮播' }
      ]
    }
  },
  mounted () {
    this.getEchartData()
    this.getEchartData1()
    this.getEchartData2()
    this.getEchartData3()
  },
  methods: {
    getEchartData () {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = echarts.init(chart)

        const xaxisData = [
          '01',
          '02',
          '03',
          '04',
          '05',
          '06',
          '07',
          '08',
          '09'
        ]
        const yaxisData = [
          1600, 1880, 1100, 2200, 2400, 1350, 1180, 4500, 1800
        ]
        const offsetX = 10
        const offsetY = 5
        // 绘制左侧面
        const CubeLeft = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0
          },
          buildPath: function (ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint
            const c0 = [shape.x, shape.y]
            const c1 = [shape.x - offsetX, shape.y - offsetY]
            const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
            const c3 = [xAxisPoint[0], xAxisPoint[1]]
            ctx
              .moveTo(c0[0], c0[1])
              .lineTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .closePath()
          }
        })

        // 绘制右侧面
        const CubeRight = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0
          },
          buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint
            const c1 = [shape.x, shape.y]
            const c2 = [xAxisPoint[0], xAxisPoint[1]]
            const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
            const c4 = [shape.x + offsetX, shape.y - offsetY]
            ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath()
          }
        })

        // 绘制顶面
        const CubeTop = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0
          },
          buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y]
            const c2 = [shape.x + offsetX, shape.y - offsetY] // 右点
            const c3 = [shape.x, shape.y - offsetX]
            const c4 = [shape.x - offsetX, shape.y - offsetY]
            ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath()
          }
        })

        // 注册三个面图形
        echarts.graphic.registerShape('CubeLeft', CubeLeft)
        echarts.graphic.registerShape('CubeRight', CubeRight)
        echarts.graphic.registerShape('CubeTop', CubeTop)

        const option = {
          backgroundColor: opener,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            backgroundColor: 'rgba(255,255,255,0.7)',
            extraCssText: 'box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);',
            textStyle: {
              fontSize: 5,
              color: '#000'
            },
            formatter: (params, ticket, callback) => {
              const item = params[1]
              return item.name + ' : ' + item.value
            }
          },
          grid: {
            left: '1%',
            right: '0%',
            top: '16%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: xaxisData,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: '#032b52'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              color: '#FFFFFF'
            }
          },
          yAxis: {
            name: '数量/排名',
            type: 'value',
            nameTextStyle: {
              color: '#fff',
              fontWeight: 400,
              fontSize: 13
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: '#032b52'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#032b52',
                type: 'dashed'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              color: '#FFFFFF'
            }
          },
          series: [
            {
              type: 'custom',
              renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)])
                return {
                  type: 'group',
                  children: [
                    {
                      type: 'CubeLeft',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                      },
                      style: {
                        fill: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                          {
                            offset: 0,
                            color: '#09f7f9'
                          },
                          {
                            offset: 1,
                            color: '#b7ba56'
                          }
                        ])
                      }
                    },
                    {
                      type: 'CubeRight',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                      },
                      style: {
                        fill: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                          {
                            offset: 0,
                            color: '#b7ba56'
                          },
                          {
                            offset: 1,
                            color: '#b7ba56'
                          }
                        ])
                      }
                    },
                    {
                      type: 'CubeTop',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                      },
                      style: {
                        fill: '#57a572'
                      }
                    }
                  ]
                }
              },
              data: yaxisData
            },
            {
              type: 'bar',
              itemStyle: {
                color: 'transparent'
              },
              data: yaxisData
            }
          ]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      }
    },
    getEchartData1 () {
      const chart1 = this.$refs.chart1
      if (chart1) {
        const myChart = echarts.init(chart1)
        const option = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: '#0b3e5e',
            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)',
            textStyle: {
              color: '#000'
            },
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '0%',
            height: '100%',
            right: '6%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: {
            splitNumber: 7,
            splitLine: {
              show: true,
              color: '#0a3957',
              lineStyle: {
                type: 'line',
                color: '#0a3957'
              }
            },
            type: 'value',
            axisTick: {
              show: true // 隐藏Y轴刻度
            },
            axisLine: {
              show: false, // 隐藏Y轴线段
              lineStyle: {
                color: '#56a4cb'
              }
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#7ca9ba'
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            },
            type: 'category',
            data: [
              'e时代',
              '千盟云控',
              'e时代',
              '千盟云控',
              'e时代',
              '千盟云控'
            ]
          },
          series: [
            {
              type: 'bar',
              textStyle: {
                color: '#FFFFFF'
              },
              itemStyle: {
                normal: {
                  color: 'rgba(22, 154, 251,0.9)'
                }
              },
              data: [2000, 1651, 1000, 1616, 1624, 3000],
              barWidth: '50%'
            }
          ]
        }
        myChart.setOption(option)
      }
    },
    getEchartData2 () {
      const chart = this.$refs.chart2
      if (chart) {
        const myChart = echarts.init(chart)

        const option = {
          // 你的代码
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: 'rgb(126,199,255)'
              }
            }
          },

          grid: {
            top: '10%',
            left: '14%',
            right: '7%',
            bottom: '15%'
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'rgb(41,188,245)'
                }
              },
              axisLabel: {
                textStyle: {
                  color: 'rgba(112, 151, 184, 1)',
                  fontSize: 12
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'line',
                  color: '#023c5f'
                }
              },
              axisTick: {
                show: false
              },
              data: [
                '01',
                '02',
                '03',
                '04',
                '05',
                '06',
                '07',
                '08',
                '09',
                '10',
                '11',
                '12',
                '13',
                '14',
                '15'
              ]
            }
          ],
          yAxis: [
            {
              name: '',
              nameTextStyle: {
                color: '#fff',
                fontSize: 12,
                padding: [0, 60, 0, 0]
              },
              // minInterval: 1,
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'line',
                  color: '#023c5f'
                }
              },
              axisLine: {
                show: true,

                lineStyle: {
                  color: 'rgb(41,188,245)'
                }
              },
              axisLabel: {
                show: true,
                formatter: '{value}包',
                textStyle: {
                  color: 'rgba(112, 151, 184, 1)',
                  fontSize: 12
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '餐饮',
              type: 'line',
              symbol: 'circle',
              smooth: true,
              lineStyle: {
                normal: {
                  width: 1,
                  color: '#00ffa2' // 线条颜色
                }
              },
              showSymbol: false,
              itemStyle: {
                normal: {
                  color: '#00f0ff', // 拐点颜色
                  label: {
                    show: true, // 开启显示
                    color: '#fff',
                    position: 'top', // 在上方显示
                    formatter: function (res) {
                      if (res.value) {
                        return res.value
                      } else {
                        return 0
                      }
                    }
                  }
                }
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    // 渐变颜色
                    {
                      offset: 0,
                      color: 'rgba(36, 214, 214, 0.6)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(36, 214, 214, 0)'
                    }
                  ],
                  global: false
                }
              },
              data: [
                '30',
                '70',
                '130',
                '200',
                '90',
                '156',
                '156',
                '147',
                '141'
              ]
            },
            {
              name: '零售',
              type: 'line',
              showSymbol: false,
              ssymbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              smooth: true,
              lineStyle: {
                normal: {
                  width: 1,
                  color: '#3D84F7' // 线条颜色
                }
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    // 渐变颜色
                    {
                      offset: 0,
                      color: 'rgba(61, 132, 247, 0.6)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(61, 132, 247, 0)'
                    }
                  ],
                  global: false
                }
              },
              data: [
                '95',
                '30',
                '170',
                '60',
                '210',
                '30',
                '70',
                '130',
                '200',
                '90',
                '156',
                '156'
              ]
            }
          ]
        }

        myChart.setOption(option)
      }
    },
    getEchartData3 () {
      const chart = this.$refs.chart3
      if (chart) {
        const myChart = echarts.init(chart)
        const option = {
          color: ['#24dfbe', '#0072db', '#f5c764'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
            {
              name: '支付占比',
              type: 'pie',
              roseType: 'radius',
              center: ['42%', '50%'],
              radius: ['10%', '55%'],
              label: {
                show: true,
                position: 'inner',
                formatter: '{d}%',
                fontSize: 10,
                color: '#ffffff'
              },
              data: [
                {
                  value: 60,
                  name: '微信'
                },
                {
                  value: 30,
                  name: '支付宝'
                },
                {
                  value: 10,
                  name: '数字货币'
                }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }

        myChart.setOption(option)
      }
    }
  },
  components: {
    Lin,
    Progress,
    vueSeamlessScroll,
    Num
  }
}
</script>

<style lang="less" scoped>
.Subject {
  display: flex;
  justify-content: space-around;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 930px;
}
.item1 {
  top: 257px !important;
  img {
    width: 90px;
    height: 92px;
  }
}
.item2 {
  top: 357px !important;
  img {
    width: 97px !important;
    height: 92px !important;
  }
  div {
    margin-left: 18px !important;
  }
}
.Left {
  flex: 1;
  // background-color: #fff;

  .left-t {
    position: relative;
    width: 443px;
    height: 554px;
    margin-left: 39px;
    background: url("../assets/框7.png") no-repeat;
    .lins {
      position: absolute;
      top: 59px;
      left: 15px;
    }
    .times {
      display: flex;
      align-items: center;
      position: absolute;
      top: 55px;
      right: 38px;
      width: 198px;
      height: 28px;
      border: 1px solid #77a39b;
      border-radius: 5px;
      img:nth-child(1) {
        display: block;
        width: 17px;
        height: 17px;
        opacity: 0.6;
        margin: 6px;
      }
      samp {
        margin-left: 9px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #75f3d4;
      }
      img:nth-child(3) {
        margin-left: auto;
        margin-right: 6px;
        width: 12px;
        height: 10px;
      }
    }
    .inp {
      display: flex;
      align-items: center;
      position: absolute;
      top: 107px;
      left: 41px;
      width: 186px;
      height: 28px;
      box-shadow: 0px 0px 32px 0px rgba(22, 180, 126, 0.18),
        0px 0px 7px 0px rgba(22, 180, 126, 0.11);
      border-radius: 5px;
      img:nth-child(1) {
        display: block;
        margin-left: 5px;
        width: 24px;
        height: 22px;
      }
      samp {
        margin-left: 6px;
        font-size: 21px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        opacity: 0.71;
      }
      img:nth-child(3) {
        display: block;
        margin-left: auto;
        margin-right: 8px;
        width: 18px;
        height: 16px;
      }
    }
    .item {
      display: flex;
      align-content: center;
      position: absolute;
      top: 156px;
      left: 37px;
      img {
        width: 89px;
        height: 95px;
      }
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 25px;
        samp:nth-child(1) {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }

        p {
          samp {
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }
    }
    .num1 {
      font-size: 30px;
      font-family: HuXiaoBo_KuHei;
      font-weight: 400;
      color: #f6d21a;
    }
    .num2 {
      font-size: 30px;
      font-family: HuXiaoBo_KuHei;
      font-weight: 400;
      color: #48bf87;
    }
    .num3 {
      font-size: 30px;
      font-family: HuXiaoBo_KuHei;
      font-weight: 400;
      color: #5990f4;
    }
    .bottom {
      display: flex;
      position: absolute;
      top: 464px;
      left: 40px;
      .bottom-l {
        display: flex;
        flex-direction: column;
        samp:nth-child(1) {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }
        samp:nth-child(2) {
          margin-top: 4px;
          font-size: 22px;
          font-family: HuXiaoBo_KuHei;
          font-weight: 400;
          color: #f6d21a;
        }
      }
      .bottom-r {
        margin-left: 60px;
        display: flex;
        flex-direction: column;
        samp:nth-child(1) {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }
        samp:nth-child(2) {
          margin-top: 4px;
          font-size: 22px;
          font-family: HuXiaoBo_KuHei;
          font-weight: 400;
          color: #5990f4;
        }
      }
    }
  }
  .left-b {
    position: relative;
    width: 444px;
    height: 312px;
    background: url("../assets/框6.png") no-repeat center center;
    margin-top: 27px;
    margin-left: 22px;
    .left-b-t {
      position: absolute;
      top: 33px;
      left: 27px;
    }
    .anim {
      position: absolute;
      top: 72px;
      left: 70px;
      height: 200px;
      overflow: hidden;
      transition: all 0.5s;
      li {
        margin-top: 2px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #68eabf;
        opacity: 0.6;
      }
    }
  }
}
.value {
  flex: 2;
  display: flex;
  flex-direction: column;
  .map {
    position: relative;
    margin-top: 10px;
    width: 940px;
    height: 550px;
    background: url("../assets/大框8.png") no-repeat center center;
    .headline {
      position: absolute;
      top: -10px;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 122px;
      height: 29px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 800;
      color: #ffffff;
      line-height: 29px;
      white-space: nowrap;
      background: linear-gradient(0deg, #3cc2e1 0%, #13a5c6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .details {
      position: absolute;
      top: 40px;
      left: 14px;
      background-color: #fff;
      width: 250px;
      height: 280px;
      background: url("../assets/小框.png") no-repeat center center;
    }
    .state {
      margin-left: 40px;
      margin-top: 35px;
      .state-l {
        width: 44px;
        height: 23px;
        text-align: center;
        line-height: 23px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 300;
        color: #ffffff;
        line-height: 18px;
      }
      .state-r {
        margin-left: 10px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 300;
        color: #ffffff;
        // line-height: 18px;
      }
    }
    .location {
      display: flex;
      align-items: center;
      margin-left: 40px;
      margin-top: 4px;
      img {
        width: 19px;
        height: 25px;
        margin-left: 10px;
      }
      samp {
        margin-left: 10px;
        width: 148px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 300;
        color: #ffffff;
      }
    }
    .day {
      display: flex;
      align-items: center;
      margin-left: 35px;
      margin-top: 10px;
      img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 50%;
      }
      .day-r {
        margin-left: 10px;
        p {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 300;
          color: #ffffff;
          .samp {
            font-size: 30px;
            font-family: HuXiaoBo_KuHei;
            font-weight: 400;
            color: #38c092;
          }
        }
      }
    }
  }
  .value-b {
    flex: 1;
    display: flex;
    margin-top: 18px;
    .b-left {
      position: relative;
      width: 458px;
      height: 310px;
      background: url("../assets/框5.png") no-repeat center center;
      margin-left: 10px;
      .b-left-t {
        position: absolute;
        top: 34px;
        left: 32px;
      }
      .chart {
        position: absolute;
        top: 80px;
        left: 8px;
        width: 435px;
        height: 191px;
      }
    }
    .b-right {
      position: relative;
      width: 460px;
      height: 310px;
      margin-left: 21px;
      background: url("../assets/框4.png") no-repeat center center;
      .b-regin-t {
        position: absolute;
        top: 35px;
        left: 22px;
      }
      .chart1 {
        position: absolute;
        top: 68px;
        left: 30px;
        width: 360px;
        height: 210px;
      }
    }
  }
}
.right {
  flex: 1;
  display: flex;
  flex-direction: column;
  .right-t {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    height: 550px;
    width: 446px;
    .t-top {
      position: relative;
      width: 446px;
      height: 258px;
      margin-top: 6px;
      background: url("../assets/框.png") no-repeat center center;
      .t-top-t {
        position: absolute;
        top: 21px;
        left: 18px;
      }
      .chart2 {
        position: absolute;
        top: 90px;
        left: 15px;
        width: 425px;
        height: 157px;
      }
    }
    .t-bun {
      position: relative;
      width: 439px;
      height: 258px;
      margin-top: 21px;
      background: url("../assets/框2.png") no-repeat center center;
      .t-bun-b {
        position: absolute;
        top: 25px;
        left: 24px;
      }
      .item-value {
        position: absolute;
        top: 95px;
        left: 64px;
        p {
          margin-bottom: 18px;
          font-size: 18px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          .f1 {
            font-size: 26px;
            color: #f5c042ff;
          }
          .f2 {
            font-size: 26px;
            color: #72b0e8ff;
          }
          .f3 {
            font-size: 26px;
            color: #5dd99fff;
          }
        }
      }
      .chart3 {
        position: absolute;
        top: 65px;
        right: 20px;
        width: 200px;
        height: 200px;
      }
    }
  }
  .right-b {
    position: relative;
    width: 443px;
    height: 312px;
    margin-top: 18px;
    background: url("../assets/框3.png") no-repeat center center;
    .right-b-n {
      position: absolute;
      top: 34px;
      left: 25px;
    }
    .anim {
      position: absolute;
      top: 72px;
      left: 70px;
      height: 200px;
      overflow: hidden;
      transition: all 0.5s;

      li {
        samp {
          display: inline-block;
          width: 60px;
          height: 21px;
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: 300;
        }
        margin-top: 2px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #68eabf;
        list-style-type: none;
        opacity: 0.6;
      }
      .bun-li1 {
        color: #fb4444ff;
      }
      .bun-li2 {
        color: #f6d21aff;
      }
    }
  }
}
</style>
